<template>
    <div class="myOrder">
        <div v-for="(stu,index) in state.order" :key="index" v-if="orderNum">
            <p class="m">
                <p>  
                    <span style="margin-right: 50px;">订单编号：{{ stu.onumber }}</span>  
                    <span>航班编号：{{ stu.fnumber }}</span>  
                </p>
                <p>身份证号：{{ stu.mask() }}</p>
                <p>下单时间：{{ stu.formatDateTime() }}</p>
                <p v-if="stu.sort !== 0">中转次数：{{ stu.sort }}次</p>
                <p>座位：{{ getSeatDescription(stu.seat) }}</p>
                <p>订单状态：{{ getOstatusDescription(stu.ostatus) }}</p>
                <!-- <p>订单状态：{{ stu.ostatus }}</p> -->
                <p>
                    <el-button @click="" class="pButton">改签</el-button>
                    <el-button @click="refund(stu.onumber)" class="pButton">退票</el-button>
                    <el-button @click="del(stu.onumber)" class="pButton">删除记录</el-button>
                </p>
            </p>
        </div>
        <div v-else>
            <p class="null">暂时没有订单信息</p>
        </div>
    </div>
</template>

<script setup lang="ts" name="MyOrder">
import {ref,reactive} from 'vue';
import { RouterView } from 'vue-router';
import { useRouter } from 'vue-router';
import {useRoute} from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route=useRoute();
//数据
class Order{
    onumber:string="";//订单编号
    idNumber:string;//身份证号
    otime:string="";//下单时间
    fnumber:string="";//航班编号
    sort:number;//是否中转
    seat:number;//座位
    ostatus:number;//订单状态

    constructor(onumber:string,idNumber:string,otime:string,fnumber:string,sort:number,seat:number,ostatus:number){
        this.onumber=onumber;
        this.idNumber=idNumber;
        this.otime=otime;
        this.fnumber=fnumber;
        this.sort=sort;
        this.seat=seat;
        this.ostatus=ostatus;
    }

    mask():string{
        const maskedStr = `${this.idNumber.slice(0,2)}**************${this.idNumber.slice(16)}`;
        return maskedStr;
    }

    formatDateTime() {  
        // 创建一个 Date 对象  
        const date = new Date(this.otime);  
        // 获取年份、月份和日期  
        const year = date.getUTCFullYear();  
        const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以加 1  
        const day = String(date.getUTCDate()).padStart(2, '0'); 
        // 获取小时和分钟  
        const hours = String(date.getUTCHours()).padStart(2, '0');  
        const minutes = String(date.getUTCMinutes()).padStart(2, '0');  
        // 格式化为目标字符串  
        return `${year}-${month}-${day} ${hours}:${minutes}`;
    }  
}
let orderNum=ref<number>(0);
const username = route.query.account;
const url = `http://localhost:8080/identity/${username}`; 
let masteridNumber=ref<string>("");
// let order:Order[]=reactive([]);
const state = reactive({  
    order: [] as Order[]  
});  
axios.get(url)
.then((response) => {
    masteridNumber.value=response.data.data.idNumber;
})
.then(()=>{
    // console.log(masteridNumber.value);
    axios.get(`http://localhost:8080/order/${masteridNumber.value}`)
        .then((response) => {
                // console.log(response.data);
                response.data.data.rows.forEach(item => {  
                state.order.push(new Order(item.onumber, item.idNumber, item.otime+"Z", item.fnumber, item.sort, item.seat, item.ostatus));  
            })
        // console.log(order);
        })
        .then(()=>{
            orderNum.value=state.order.length;
            // console.log(orderNum.value);
        })
    })
//方法
function del(oNumber:string){
    // console.log(oNumber);
    const params={
        oNumber:oNumber
    }
    axios.delete('http://localhost:8080/order',{params})  
        .then((response) => {  
            if(response.data.code==1)
                ElMessage.success({message:response.data.msg,showClose:true});
            else
                ElMessage.error({message:response.data.msg,showClose:true});
        })  
        .then(()=>{
            axios.get(url)
            .then((response) => {
                masteridNumber.value=response.data.data.idNumber;
            })
            .then(()=>{
                state.order=[];
                // console.log(masteridNumber.value);
                axios.get(`http://localhost:8080/order/${masteridNumber.value}`)
                    .then((response) => {
                            // console.log(response.data);
                            response.data.data.rows.forEach(item => {  
                            state.order.push(new Order(item.onumber, item.idNumber, item.otime+"Z", item.fnumber, item.sort, item.seat, item.ostatus));  
                        })
                    // console.log(order);
                    })
                    .then(()=>{
                        orderNum.value=state.order.length;
                        // console.log(orderNum.value);
                    })
                })
        })
}
function refund(oNumber:string){
    // console.log(oNumber);
    const params={
        oNumber:oNumber
    }
    axios.put('http://localhost:8080/order/refund',null,{params})  
    .then((response) => {  
        if(response.data.code==1)
            ElMessage.success({message:response.data.msg,showClose:true});
        else
            ElMessage.error({message:response.data.msg,showClose:true});
    })  
    .then(()=>{
            axios.get(url)
            .then((response) => {
                masteridNumber.value=response.data.data.idNumber;
            })
            .then(()=>{
                state.order=[];
                // console.log(masteridNumber.value);
                axios.get(`http://localhost:8080/order/${masteridNumber.value}`)
                    .then((response) => {
                            // console.log(response.data);
                            response.data.data.rows.forEach(item => {  
                            state.order.push(new Order(item.onumber, item.idNumber, item.otime+"Z", item.fnumber, item.sort, item.seat, item.ostatus));  
                        })
                    // console.log(order);
                    })
                    .then(()=>{
                        orderNum.value=state.order.length;
                        // console.log(orderNum.value);
                    })
                })
        })
}
function getSeatDescription(seatNumber) {  
    switch (seatNumber) {  
        case 1: return "过道";  
        case 2: return "中间";  
        case 3: return "窗边";  
        default: return "未知座位";  
    }  
}  
function getOstatusDescription(ostatus) {  
    switch (ostatus) {  
        case 1: return "已购买";  
        case 2: return "已退票";  
        case 3: return "已改签";  
        default: return "未知状态";  
    }  
}  
</script>
<style>
.m{
    border-radius: 15px;/*圆角*/
    background-color: #0086f6;
    color:white;
    padding: 10px 20px !important; /* 调整上下左右的内边距 */ 
}
.pButton{
    background-color: white !important;
    color: black !important;;
}
.null{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: red;
    font-size: 30px;
}
</style>